<template>
  <div class="loginBox">
    <div class="hand">
      <span>主页</span>
      <!-- <span class="user">Hi：用户</span> -->
    </div>
    <div class="main">
      <ul class="box_body">
        <li class="box color1" @click="goto_list('质量检查')">
          <i class="iconfont icon_fz">&#xe65d;</i>
          <br />
          &nbsp;质量检查&nbsp;
        </li>
        <li class="box color2" @click="dialogVisible = true">
          <i class="iconfont icon_fz">&#xe62f;</i>
          <br />
          满意度调查
        </li>
        <!-- <li class="box color3" @click="goto_list('原因分析')">
          <i class="iconfont icon_fz">&#xe627;</i>
          <br />
          &nbsp;原因分析&nbsp;
        </li>
        <li class="box color1" @click="goto_list('跟踪检查')">
          <i class="iconfont icon_fz">&#xe627;</i>
          <br />
          &nbsp;跟踪检查&nbsp;
        </li> -->
      </ul>
    </div>
    <el-dialog
      title="满意度"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <div class="main">
        <ul class="box_body" style="margin-top: 0">
          <li class="box color1" @click="goto_list('门诊满意度')">
            <i class="iconfont icon_fz">&#xe62f;</i>
            <br />
            门诊满意度
          </li>
          <li class="box color2" @click="goto_list('住院满意度')">
            <i class="iconfont icon_fz">&#xe62f;</i>
            <br />
            住院满意度
          </li>
          <li class="box color3" @click="goto_list('其他满意度')">
            <i class="iconfont icon_fz">&#xe62f;</i>
            <br />
            其他满意度
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    goto_list(title) {
      if (title == "质量检查") {
        this.$router.push("/IPAD/ZLJC/zljc?ipad=true");
      }
      if (title == "原因分析") {
        this.$router.push("/IPAD/ZLJC/fxyzz?ipad=true");
      }
      if (title == "跟踪检查") {
        this.$router.push("/IPAD/ZLJC/fxyzz2?ipad=true");
      }
      if (title == "门诊满意度") {
        this.$router.push("/IPAD/MYDDC/Cymyd/cymyddc?ipad=true");
      }
      if (title == "住院满意度") {
        this.$router.push("/IPAD/MYDDC/Zymyd/zymyddc?ipad=true");
      }
      if (title == "其他满意度") {
        this.$router.push("/IPAD/MYDDC/Qtmyd/qtmyddc?ipad=true");
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.hand {
  background-color: rgb(14, 155, 227);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  padding: 10px 0;
  .user {
    float: right;
    font-weight: normal;
    font-size: 14px;
    margin-right: 15px;
  }
}
.box_body {
  text-align: center;
  margin-top: 20vh;
  .box {
    display: inline-block;
    text-align: center;
    padding: 10px 20px;
    color: #fff;
    border-radius: 10px;
    margin: 0 20px;
  }
  .icon_fz {
    font-size: 60px;
  }
}
.color1 {
  background-color: rgb(225, 205, 79);
}
.color2 {
  background-color: rgb(153, 102, 204);
}
.color3 {
  background-color: rgb(9, 151, 252);
}
.loginBox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../../../src/assets/loginBg.jpg) no-repeat center;
  background-size: cover;
}
</style>